import React, { ReactElement, useContext } from 'react';
import { View, Image, ScrollView } from 'react-native';
import Button from '../../../../../../components/Button';
import { pullUpArrow } from '../../../../../../constant/resource';
import { Store } from '../../reducer';
import { setCurrentGrade, setIsShowSelectGrade } from '../../actions';

import styles from './style';
import CustomText from '../../../../../../components/Text';
import { GRADE_LIST } from '../../constant';
import { setUserInfo } from '../../../../../../store/user';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { isShowSelectGrade, currentGrade } = state;

  if (!isShowSelectGrade) {
    return <View />;
  }
  return (
    <View style={styles.container}>
      <View style={styles.loadInfo}>
        <Button
          style={styles.loadGrade}
          onPress={(): void => {
            setIsShowSelectGrade(false);
          }}
        >
          <CustomText style={styles.grade}>{currentGrade.desc}</CustomText>
          <Image source={pullUpArrow} style={styles.pullUpArrow} />
        </Button>
        <CustomText style={styles.selectDesc}>选择我当前所在的年级</CustomText>
      </View>
      <ScrollView
        style={styles.content}
        contentContainerStyle={styles.loadGrades}
      >
        {GRADE_LIST.map(
          (grade): ReactElement => (
            <Button
              key={grade.id}
              style={styles.selectGrade}
              textStyle={styles.gradeDesc}
              text={grade.desc}
              onPress={(): void => {
                setCurrentGrade(grade);
                setUserInfo({ currentGrade: grade.id });
                setIsShowSelectGrade(false);
              }}
            />
          )
        )}
      </ScrollView>
      <Button
        style={styles.loadLine}
        onPress={(): void => {
          setIsShowSelectGrade(false);
        }}
      >
        <View style={styles.line} />
      </Button>
    </View>
  );
};
